

import React, { useEffect } from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

export default function Tiezi() {
  useEffect(() => {
    const chartDom = document.getElementById('Tiezi');
    const myChart = echarts.init(chartDom);

    const option = {
      tooltip: {
        trigger: 'item',
      },
      //   legend: {
      //     top: '5%',
      //     left: 'center',
      //   },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          
          emphasis: {
            label: {
              show: false,
              fontSize: 40,
              fontWeight: 'bold',
            },
          },
          //内部显示占比以及对应名字
          label: {
            show: true,
            position: 'center',
            formatter: function (params) {
              return 100 - params.percent + '%';
            },
            fontSize: 20,
          },

          data: [
            { value: 38, name: '帖子' },
            { value: 122, name: '其他' },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  }, []);
  return (
    <div style={{ textAlign: 'center', height: '2.5rem', width: '100%' }}>
      <div id="Tiezi" style={{ height: '100%', width: '100%' }}></div>
    </div>
  );
}
